<template>
  <div class="user_right fl ml20">
    <div class="p30 pb40" style="position:relative">
      <div class="uc_tab">
        <a href="javascript:;" class="crently">
          认证资质
          <i></i>
        </a>
      </div>
      <!-- 未认证 -->
      <div>
        <div>
          <el-form :model="certification" :rules="rules" ref="certification" label-width="100px" class="demo-dynamic" @submit.native.prevent>
          <el-form-item prop="userType">
            <el-row :gutter="20" type="flex" align="middle" class="enterpriseT">
            <el-col :span="5">
              <div class="titleT">用户类型:</div>
            </el-col>
            <el-col :span="15">
              <div class="enterprisexz">
                <el-select
                  style="width:80%"
                  v-model="certification.userType"
                  placeholder="请选择"
                  size="small"
                  @change="enterprise_input"
                >
                  <el-option
                    v-for="item in user_types"
                    :key="item.value"
                    :label="item.tabel"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="20" type="flex" align="middle" class="enterpriseT">
            <el-col :span="5">
              <div class="titleT">企业类型:</div>
            </el-col>
            <el-col :span="15">
              <div class="enterprisexz">
                <el-select
                  v-if="twoxz === 'seller'"
                  style="width:80%"
                  v-model="certification.enterprisevalue"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in enterprise_type"
                    :key="item.value"
                    :label="item.tabel"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="buyername"
                  disabled
                  placeholder="请选择"
                  style="width:80%"
                  v-else-if="twoxz === 'buyer'"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.tabel"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item  v-if="twoxz === 'seller'" prop="company">
            <el-row :gutter="20" type="flex" class="enterpriseT">
            <el-col :span="5">
              <div class="titleT">公司名称</div>
            </el-col>
            <el-col :span="15">
              <el-input style="width:80%" v-model="certification.company" placeholder="请输入公司名称"></el-input>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item v-if="twoxz === 'seller'" prop="credit_code">
            <el-row :gutter="20" type="flex" class="enterpriseT" >
            <el-col :span="5">
              <div class="titleT">统一社会信用代码</div>
            </el-col>
            <el-col :span="15">
              <el-input style="width:80%" v-model="certification.credit_code" placeholder="请输入统一社会信用代码"></el-input>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item v-if="twoxz === 'seller'" prop="principal">
            <el-row :gutter="20" type="flex" class="enterpriseT" >
            <el-col :span="5">
              <div class="titleT">负责人</div>
            </el-col>
            <el-col :span="15">
              <el-input style="width:80%" v-model="certification.principal" placeholder='请输入负责人'></el-input>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item v-if="twoxz === 'seller'" prop="phone">
            <el-row :gutter="20" type="flex" class="enterpriseT" >
            <el-col :span="5">
              <div class="titleT">公司电话</div>
            </el-col>
            <el-col :span="15">
              <el-input style="width:80%" v-model="certification.phone" placeholder='请输入公司电话'></el-input>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item v-if="twoxz === 'seller'" prop="address">
            <el-row :gutter="20" type="flex" class="enterpriseT" >
            <el-col :span="5">
              <div class="titleT">公司地址</div>
            </el-col>
            <el-col :span="15">
              <el-input style="width:80%" v-model="certification.address" placeholder="请输入公司地址"></el-input>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item v-if="twoxz === 'seller'">
            <el-row :gutter="20" type="flex" class="enterpriseT" >
            <el-col :span="5" type="flex" align="middle">
              <div class="titleT">经销品牌:</div>
            </el-col>
            <el-col :span="14">
              <div v-for="(item,index) in distribution" :key="index" class="item_brands">
                <el-row :gutter="10" type="flex" align="middle">
                  <el-col :span="7">
                    <el-select v-model="item.brand_type" placeholder="是否国产" size="small">
                      <el-option
                        v-for="item in isdomestic"
                        :key="item.value"
                        :label="item.tabel"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="9">
                    <el-select v-model="item.brand_id" placeholder="请选择品牌" size="small">
                      <el-option
                        v-for="item in brandsOption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="9">
                    <div>
                      <el-input v-model="item.brand_abbreviation" placeholder="品牌中文简称"></el-input>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="1">
              <div @click="addBrand">
                <i class="el-icon-circle-plus-outline" style="font-size:20px"></i>
              </div>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item v-if="twoxz === 'seller'" prop="description">
            <el-row :gutter="20" type="flex" class="enterpriseT" >
            <el-col :span="5">
              <div class="titleT">公司简介</div>
            </el-col>
            <el-col :span="15">
              <el-input type="textarea" :rows="5" placeholder="请输入公司简介" v-model="certification.description"></el-input>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item v-if="twoxz === 'seller'" prop="bank_name">
            <el-row :gutter="20" type="flex" class="enterpriseT" >
            <el-col :span="5">
              <div class="titleT">开户银行</div>
            </el-col>
            <el-col :span="15">
              <el-input  placeholder="请输入开户银行" v-model="certification.bank_name"></el-input>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item v-if="twoxz === 'seller'" prop="bank_account">
            <el-row :gutter="20" type="flex" class="enterpriseT" >
            <el-col :span="5">
              <div class="titleT">银行账号</div>
            </el-col>
            <el-col :span="15">
              <el-input  placeholder="请输入银行账号" v-model="certification.bank_account"></el-input>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item v-if="certification.enterprisevalue === 'dealer'">
            <el-row :gutter="20" type="flex" align="middle" class="enterpriseR">
            <el-col :span="5">
              <div class="titleT">资料上传:</div>
            </el-col>
            <el-col :span="15">
              <div class="enterprisexza">
                <div style="text-align: center;">
                  <el-upload
                  action
                  :multiple="false"
                  :limit="1"
                  list-type="picture-card"
                  :on-change="getFile"
                  :on-remove="handleRemovea"
                  :auto-upload="false"
                  :class="{hidea:hideUploada}"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <span style="margin-left: 37px">营业执照</span>
                </div>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
                <div style="text-align: center;">
                <el-upload
                  v-if="twoxz==='seller'"
                  action
                  style="margin-left:40px"
                  :multiple="false"
                  :limit="1"
                  list-type="picture-card"
                  :on-change="getFilea"
                  :on-remove="handleRemoveb"
                  :auto-upload="false"
                  :class="{hidea:hideUploadb}"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <span>授权证书</span>
                </div>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
              </div>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="20" type="flex" align="middle" class="enterpriseT">
            <el-col :span="5"></el-col>
            <el-col :span="15" v-if="twoxz === 'buyer'">
              <div class="remarks">*请上传开票资料电子版，图片大小不超过2M.</div>
            </el-col>
            <el-col :span="15" v-if="twoxz === 'seller'">
              <div class="remarks">*请上传授权证书和开票资料，图片大小不超过2M.</div>
            </el-col>
          </el-row>
          </el-form-item>
           <el-row :gutter="20" type="flex" align="middle" class="enterpriseT">
            <el-col :span="5"></el-col>
            <el-col :span="15" v-if="twoxz === 'seller'">
              <li class="clli">
                <div class="m-read">
                  <input name="license" type="checkbox" id="isshops" ref="isshops" value="on" />我已阅读并同意&nbsp;
                  <a
                    href="/#/bulletin/?id=19"
                    target="_blank"
                    style="color:#ff0000"
                  >《商家注册协议》</a>
                </div>
              </li>
            </el-col>
          </el-row>
          <el-form-item>
            <el-row :gutter="20" type="flex" align="middle" class="enterpriseT">
            <el-col :span="5"></el-col>
            <el-col :span="15">
              <div class="btn_R">
                <button @click="submitForm('certification')">提交认证</button>
              </div>
            </el-col>
          </el-row>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="20" type="flex" align="middle" class="enterpriseW">
            <el-col :span="20">
              <div class="remarkw">温馨提示：完成认证后，您将拥有上架商品，询货报价，议价咨询，确认订单等诸多权限</div>
            </el-col>
          </el-row>
          </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { brands } from "@/api/category";
import { certification } from "@/api/business";
export default {
  name: "rt-VerifiedMember",
  metaInfo: {
    title: "会员认证",
    titleTemplate: "工流界MRO一站式采购商城",
  },
  data() {
    return {
      verified: {},
      activeName: "first",
      hasMod: true,
      unauthorized: true,
      hideUploada: false,
      hideUploadb: false,
      imageUrl: "",
      twoxz: "seller",
      user_types: [
        {
          tabel: "卖家",
          value: "seller",
        },
        {
          tabel: "买家",
          value: "buyer",
        },
      ],
      enterprise_type: [
        {
          tabel: "授权经销商",
          value: "dealer",
        },
        {
          tabel: "生产厂家",
          value: "factory",
        },
        {
          tabel: "分销商",
          value: "distributor",
        },
      ],
      isdomestic: [
        {
          tabel: "进口",
          value: "abroad",
        },
        {
          tabel: "国产",
          value: "domestic",
        },
      ],
      options: [
        {
          tabel: "买家",
          value: 2,
        },
      ],
      certification:{
        userType: "seller",
        enterprisevalue: "",
        company:'',
        credit_code:'',
        principal:'',
        phone:'',
        address:'',
        description:'',      
        bank_name:'',    
        bank_account:'',

      },
      
      brandsOption: [],
      
      dialogImageUrl: "",
      dialogVisible: false,
      buyername: "买家",
      imgBase64: [],
      distribution: [
        {
          brand_type: "",
          brand_id: "",
          brand_abbreviation: "",
        },
      ],
      rules:{
        userType:[
           { required: true, message: '请选择用户类型', trigger: 'change' }
        ],
        company:[
           { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        credit_code:[
          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
        ],
        principal:[
          { required: true, message: '请输入负责人', trigger: 'blur' },
        ],
        phone:[
          { required: true, message: '请输入公司电话', trigger: 'blur' },
        ],
        address:[
           { required: true, message: '请输入公司地址', trigger: 'blur' },
        ],
        description:[
          { required: true, message: '请输入公司简介', trigger: 'blur' },
        ],
        bank_name:[
          { required: true, message: '请输入开户银行', trigger: 'blur' },
        ],
        bank_account:[
          { required: true, message: '请输入银行账号', trigger: 'blur' },
        ]
      }
    };
  },
  created() {
    this.getBarands();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleAvatarSuccess() {},
    beforeAvatarUpload() {},
    getFile(file, fileList) {
      this.getBase64(file.raw).then((res) => {
        this.imgBase64.push(res);
        this.hideUploada = true;
        console.log(this.imgBase64);
      });
    },
    getFilea(file, fileList) {
      console.log(file);
      this.getBase64(file.raw).then((res) => {
        this.imgBase64.push(res);
        this.hideUploadb = true;
        console.log(this.imgBase64);
      });
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    handleRemovea() {
      console.log("点击了删除");
      this.imgBase64.splice(0, 1);
      this.hideUploada = false;
      console.log(this.imgBase64);
    },
    handleRemoveb() {
      this.imgBase64.splice(1, 1);
      this.hideUploadb = false;
      console.log(this.imgBase64);
    },
    // 第一个选择值改变
    enterprise_input(e) {
      console.log(e);
      this.twoxz = e;
    },

    // 获取品牌列表
    async getBarands() {
      const res = await brands();
      this.brandsOption = res;
    },

    // 添加选项
    addBrand() {
      let datas = {
        brand_type: "",
        brand_id: "",
        brand_abbreviation: "",
      };
      this.distribution.push(datas);
      console.log(this.distribution);
    },

    // 验证提交验证
    submitForm(formName) {
        if(!this.$refs.isshops.checked){
          this.$message.error('请先勾选商家注册协议');
        return;
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitRz();
          } else {
            console.log('error submit!!');
          }
        });
      },

    // 提交认证
    async submitRz() {
      // 买家认证
      if (this.certification.userType === "buyer") {
        const datau = {
          company_type: "buyer",
          file_images_base64: this.imgBase64,
        };
        await certification(datau);
        this.$message({
          message: "恭喜你，买家认证成功",
          type: "success",
        });
        return;
      }
      //卖家认证
      if (this.certification.userType === "seller") {
        const datam = {
          company_type: "seller",
          file_images_base64: this.imgBase64,
          company_form: this.certification.enterprisevalue,
          brands: this.distribution,
          company_name:this.certification.company,
          credit_code:this.certification.credit_code,
          company_phone:this.certification.phone,
          company_address:this.certification.address,
          company_introduction:this.certification.description,
          company_bank:this.certification.bank_name,
          company_account:this.certification.bank_account,
          company_user:this.certification.principal
        };
        await certification(datam);
        this.$message({
          message: "恭喜你，卖家认证成功",
          type: "success",
        });
        return;
      }
    },
  },
};
</script>

<style lang="scss">
// .user_right {
//   width: 950px;
//   background: #fff;
.uc_tab {
  height: 40px;
  width: 100%;
  text-align: left;
  border-bottom: 2px solid #e6e6e6;
  a {
    height: 40px;
    position: relative;
    display: inline-block;
    margin-right: 30px;
    font-size: 18px;
  }
  .crently {
    color: #4448f8;
    i {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      background: #4448f8;
      height: 2px;
      overflow: hidden;
    }
  }
}
//   .step_level {
//     width: 640px;
//     margin: 40px auto;
//     height: 98px;
//     position: relative;
//     font-size: 14px;
//     color: #999;
//     .tab {
//       width: 640px;
//       height: 60px;
//       background: url("../../../assets/img/VerifiedMember——bg.jpg");
//     }
//   }
//   .bgf7f7f7 {
//     background: #f7f7f7;
//   }
//   .relative {
//     position: relative;
//     .com_form {
//       padding: 50px 0 30px;
//       color: #333;
//       dd {
//         margin-bottom: 20px;
//         line-height: 36px;
//         b {
//           float: left;
//           width: 140px;
//           text-align: right;
//           i {
//             color: #ff0000;
//             margin-right: 5px;
//           }
//         }
//         p {
//           float: left;
//           position: relative;
//           width: 388px;
//           top: 0px;
//           left: 0px;
//           select {
//             border: 1px solid #e6e6e6;
//             height: 34px;
//             line-height: 34px;
//             width: 120px;
//             margin-right: 10px;
//             option {
//               font-weight: normal;
//               display: block;
//               white-space: pre;
//               min-height: 1.2em;
//               padding: 0px 2px 1px;
//             }
//           }
//           input {
//             margin-right: 10px;
//             border: 1px solid #e6e6e6;
//             height: 34px;
//             line-height: 34px;
//             text-indent: 5px;
//             width: 388px;
//           }
//           a.bg4448f8,
//           input.bg4448f8 {
//             background: #4448f8;
//             color: #fff;
//           }
//         }
//       }
//     }
//   }
//   form {
//     .mask {
//       display: block;
//       position: absolute;
//       width: 400px;
//       height: 100%;
//       top: 0;
//       -webkit-transform: skew(-5deg);
//       -ms-transform: skew(-5deg);
//       -o-transform: skew(-5deg);
//       transform: skew(-5deg);
//       background: #c7c7c7;
//       right: -16%;
//       z-index: 2;
//       p {
//         transform: skew(5deg);
//         margin-left: 34px;
//         margin-top: 116px;
//         width: 158px;
//         text-align: center;
//         .c4448f8 {
//           color: #4448f8;
//           .topersonal {
//             background: url("../../../assets/img/icon-enterPersonal.png")
//               no-repeat center center;
//             width: 158px;
//             height: 158px;
//             display: block;
//             margin-top: 30px;
//           }
//         }
//       }
//     }
//   }
//   input.bg4448f8 {
//     background: #4448f8;
//     color: #fff;
//     width: 160px;
//     height: 40px;
//     line-height: 40px;
//     text-align: center;
//     font-size: 16px;
//     display: inline-block;
//     margin-top: 25px;
//     margin-right: 20px;
//     border: 0;
//   }
// }
// .bgf7f7f7 dt {
//   padding-left: 140px;
// }
// /deep/.avatar-uploader {
//   .el-upload {
//     border: 1px solid #e6e6e6;
//     background: #fff;
//     border-radius: 3px;
//     cursor: pointer;
//     position: relative;
//     overflow: hidden;
//     width: 350px;
//     height: 240px;
//   }
//   .el-upload:hover {
//     border-color: #409eff;
//   }
// }
// .avatar-uploader-icon {
//   font-size: 28px;
//   color: #8c939d;
//   width: 130px;
//   height: 130px;
//   line-height: 150px;
//   text-align: center;
//   margin: 20px 0;
//   border: 1px solid #ccc;
//   border-radius: 5px;
//   color: #ccc;
//   font-size: 50px;
// }
// p {
//   color: #999;
//   font-size: 12px;
//   padding: 0 5px;
//   text-align: left;
//   line-height: 20px;
// }
// .avatar {
//   width: 300px;
//   height: 200px;
//   display: block;
//   background: #fff;
// }
// .c999 {
//   color: #999;
// }
// .f14 {
//   font-size: 14px;
// }
// .mt10 {
//   margin-top: 10px;
// }
// .pb40 {
//   padding-bottom: 40px;
// }
// .p30 {
//   padding: 30px;
// }
// .w600 {
//   width: 600px;
// }
// .c4448f8 {
//   color: #4448f8;
// }
// .f20 {
//   font-size: 20px;
// }
// .pt40 {
//   padding-top: 40px;
// }
// .center {
//   text-align: center;
// }
// .c666 {
//   color: #666;
// }
// .mt20 {
//   margin-top: 20px;
// }
// .clearfix {
//   zoom: 1;
// }
// .clearfix:after {
//   content: " ";
//   display: block;
//   height: 0;
//   clear: both;
// }
.enterpriseT {
  margin-top: 15px;
}
.enterpriseR {
  margin-top: 20px;
}
.enterpriseW {
  margin-top: 39px;
}
.titleT {
  text-align: center;
  font-size: 16rpx;
  color: #333;
}
.remarks {
  font-size: 16px;
  color: #999;
}
.remarkw {
  font-size: 15px;
  color: #999;
  padding-left: 60px;
}
.btn_R {
  button {
    background: #4448f8;
    height: 40px;
    width: 180px;
    border-radius: 10px;
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    &:hover {
      background: hsla(239, 57%, 43%, 0.589);
    }
  }
}
.item_brands {
  margin-bottom: 10px;
}
.hidea .el-upload--picture-card {
  display: none;
}
.hideb .el-upload--picture-card {
  display: none;
}
.enterprisexza {
  display: flex;
}
.el-form-item__error{
      padding-top: 3px;
    margin-left: 169px;
}
.m-read{
  padding-left: 70px;
  display: flex;
  align-items: center;
}
</style>
